<template>
  <div class="chat-toolbar">
    <div class="prefix-action" v-if="false">
      <el-button class="chat-bar-button" :icon="IconChatAddFile" text></el-button>
    </div>
    <div class="input-content">
      <el-input
        type="textarea"
        :autosize="{ minRows: 1, maxRows: 10 }"
        v-model="inputValue"
        @keydown.enter.prevent="handleEnter"
        placeholder="请输入内容"
        resize="none"
      />
    </div>
    <div class="suffix-action">
      <el-button
        class="chat-bar-button enlarge-button"
        v-if="false"
        :icon="IconChatEnlarge"
        text
      ></el-button>
      <div class="divider-line" v-if="false"></div>
      <el-button
        :disabled="canSend ? false : true"
        class="chat-bar-button"
        circle
        :icon="canSend ? IconChatSend : IconChatNotSend"
        @click="sendMessage"
        text
      ></el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, defineEmits, defineProps} from 'vue'
import { ElMessage } from 'element-plus'
import { AIGCStatus} from '../../utils/interface'
import IconChatSend from '../icons/IconChatSend.vue'
import IconChatNotSend from '../icons/IconChatNotSend.vue'
import IconChatAddFile from '../icons/IconChatAddFile.vue'
import IconChatEnlarge from '../icons/IconChatEnlarge.vue'
const emit = defineEmits(['sendMessage'])
const inputValue = ref('')
const prevInputValue = ref('')
const canSend = ref<boolean>(true)
const props = defineProps({
  chatInstance: {
    type: Object,
    default: () => {}
  }
})
const handleEnter = (event: KeyboardEvent) => {
  if (event.shiftKey) {
    // Shift + Enter: 插入换行符
    inputValue.value += '\n'
  } else {
    // 单独的 Enter: 可能发送消息
    setTimeout(() => {
      // 检查输入框内容是否在短时间内发生了变化
      if (inputValue.value === prevInputValue.value) {
        // 内容没有变化，说明不是输入法在输入中文，可以发送消息
        sendMessage()
      } else {
        // 内容发生了变化，可能是输入法在输入中文，不发送消息
        prevInputValue.value = inputValue.value // 更新上一次输入的内容
      }
    }, 200) // 延迟 200 毫秒再检查

    prevInputValue.value = inputValue.value // 记录当前输入的内容，用于后续比较
  }
}

// 发送消息
const sendMessage = () => {
  if (inputValue.value.trim()) {
    console.log('发送消息:', inputValue.value)
    if(props?.chatInstance?.aicgSession?.status?.value === AIGCStatus.InProgress){
      ElMessage('对话进行中，请稍后再试');
      return
    }
    if(!props?.chatInstance){
      ElMessage('暂时无法对话，请稍后再试');
      return
    }
    emit('sendMessage', inputValue.value)
    inputValue.value = '' // 清空输入框
  }
}

watch(
  () => props?.chatInstance?.aicgSession?.status,
  (val, oldVal) => {
    if(val?.value === AIGCStatus.InProgress){
      canSend.value = false;
    }
    else{
      canSend.value = true;
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style scoped lang="scss">
.chat-toolbar {
  width: 100%;
  display: flex;
  padding: 12px 16px;
  align-items: flex-start;
  display: flex;

  .chat-bar-button {
    width: 32px;
    height: 32px;
    color: var(--crp-text-color-primary);
  }

  .el-button {
    font-size: 24px;
  }

  .enlarge-button {
    font-size: 16px;
  }

  .divider-line {
    margin: auto var(--crp-margin-small);
    margin-top: var(--crp-margin-small);
    width: 1px;
    height: 16px;
    background: var(--crp-border-color);
  }

  .suffix-action {
    display: flex;
    flex-direction: row;
  }

  .input-content {
    flex-grow: 1;
    height: auto;

    :deep(.el-textarea) {
      .el-textarea__inner {
        box-shadow: none;
      }
    }
  }
}
</style>
